<template>
    <view class="box">
        <view>
            <i class="iconfont icon-cha" @click="goBack"></i>
        </view>
        <view class="greed">
            <text class="greed-title">欢迎登陆</text>
            <text class="greed-sub-title"></text>
        </view>
        <view class="login">
            <u-form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
                <u-form-item class="form-item" prop="userInfo.phone" borderBottom ref="item1"
                    style="border-bottom:0.05rem solid gray ;">
                    <u-input v-model="model1.userInfo.phone" placeholder="请输入手机号码"></u-input>
                </u-form-item>
                <u-form-item class="form-item" prop="userInfo.phone" borderBottom ref="item1"
                    style="border-bottom:0.05rem solid gray ;">
                    <u-input v-model="model1.userInfo.sms" placeholder="请输入验证码"></u-input>
                    <u-button type="primary" class="sendSmsBtn" @click="sendSms">发送验证码</u-button>
                </u-form-item>
                <u-button type="primary" :ripple="true" :throttle-time="1000" shape="circle" form-type="submit"
                    @click="login">登录</u-button>
            </u-form>
        </view>
    </view>
</template>

<script>
    import {
        request,
        message,
        back
    } from '../../api';
    export default {
        data() {
            return {
                model1: {
                    userInfo: {
                        phone: '',
                        sms: '',
                    },
                },
                rules: {

                }
            }
        },
        methods: {
            goBack() {
                back();
            },
            async sendSms() {
                const res = await request.post("/login/sendSms", {
                    phoneNumber: this.model1.userInfo.phone
                });
                console.log(res);
                if (res.code >= 0) {
                    message.success(res.message)
                } else {
                    message.success(res.message)
                }
            },
            async login() {
                const res = await request.post("/login/loginH5", {
                    phone: this.model1.userInfo.phone,
                    sms: this.model1.userInfo.sms
                });
                if (res.code >= 0) {
                    uni.setStorageSync("uid", res.data.uid);
                    uni.setStorageSync("token", res.data.token);
                    message.success(res.message);
                    back();
                } else {
                    message.error(res.message);
                }
            }
        }
    }
</script>

<style>
    .form-item {
        margin-bottom: 0.5rem;
        position: relative;
    }

    .sendSmsBtn {
        position: absolute;
        top: 0.1rem;
        right: 0.1rem;
    }

    .box {
        padding: 0.8rem;
    }

    .greed {
        padding-top: 2rem;
    }

    .greed-title {
        padding: 1rem 0;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .greed-sub-title {
        padding: 0.5rem 0;
    }

    .login {
        padding: 2rem 0;
    }

    .login-btn {
        background-color: blue;
    }
</style>